import React from 'react'
import { BrowserRouter as Router, Redirect, Route, NavLink, Switch } from 'react-router-dom';

class Topics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
			res: [],
  	    };
    }
	componentDidMount() {
		fetch('http://62.234.30.197:8088/topics/chaall', {
			method: 'post',
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			console.log(res)
			this.setState({
				res: res
			});
		})
	}
    render () {
		const han = (id) => {
			fetch('http://62.234.30.197:8088/topics/topicsidshan', {
				method: 'post',
				body: JSON.stringify({'topicsid':id}),
				headers: {
				    "Access-Control-Allow-Origin":"*",
				    'content-type': 'application/json'
				},
				mode: 'cors'
			})
		}
		return (
        <div>
			<div className='div-top'>
				<ul>
					<li className='li-id'>topicsid</li>
					<li className='li-date'>发表日期</li>
					<li className='li-name'>图片</li>
					<li className='li-title'>内容</li>
					<li className='li-like'>点赞</li>
					<li className='li-del'>操作</li>
				</ul>
			</div>
			<div >{
				this.state.res.map((item, idx) => {
					return <ul className='article-ul'>
						<li className='li-id'>{item.topicsid}</li>
						<li className='li-date'>{item.writedate}</li>
						<li className='li-name'>
							<img src={item.pic} className=''/>
						</li>
						<li className='li-title itemtxt'>{item.txt}</li>
						<li className='li-like'>{item.likecount}</li>
						<li className='li-del'>
							<button className='btn-shan-wen' onClick={(e) => {
								let arr = this.state.res;
								for(let i = 0; i < arr.length; i ++){
									if(arr[i].topicsid == item.topicsid){
										arr.splice(i, 1);
										break;
									}
								}
								this.setState({
									res: arr
								})
								han(item.topicsid);
							}}>删除</button>
						</li>
					</ul>
				})
			}</div>
			<div style={{textAlign:'center'}}><button className='addtopicsbtn' onClick={() =>{
				var x = document.getElementsByClassName("bijian-right-box");
				var i;
				for (i = 0; i < x.length; i++) {
				    x[i].style.display = "none";
				}
				document.getElementsByClassName('bijian-right-box')[5].style.display="block";
			}}>添加佚名随笔</button></div>
        </div>
    );
  }
}
export default Topics
